<template>
	<view style="width: 100%;display:flex;">
		<u-checkbox-group @change="checkbox_change" style="width: 100%;display:flex">
			
			<template v-for="item in cartList">
				<view style="width: 100%;display:flex;justify-content:space-between;padding: 15rpx;">
					<view style="display:flex">
						<u-checkbox :name="item.goodsId" v-model="item.checked" shape="circle"></u-checkbox>
						<slot name="img" :src="item.img"></slot>
						<view style="display:flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;">
							<slot name="title" :title="item.title"></slot>
							<slot name="price" :price="item.price"></slot>
						</view>
					</view>
					
					<view style="display:flex;flex-direction: column;justify-content:flex-end;">
						<u-number-box v-model="item.num" @change="valChange"></u-number-box>
					</view>
					
				</view>
			</template>
		</u-checkbox-group>
		
		
		
	</view>
</template>

<script>
export default {
	emits: ['shopcartmodemits'],
	props: {
		list:{
			type:Array,
			default(rawProps){
				return [{img:'/static/logo.png',title:'标题标题标题1',goodsId:"001",num:0,price:0,checked:false}]
			}
			
		}
	},
	data() {
		return {
			cartList:this.list
		}
	},
	setup(props,ctx){
		const db = (e) => {
			ctx.emit('shopcartmodemits',e)
		}
		return {
			db
		}
	},
	methods:{
		checkbox_change(e){
			this.dataBack("单选");
		},
		valChange(e) {
			this.dataBack("数量调整");
		},
		//全选
		checkAll(){
			for(var i in this.list){
				this.list[i].checked=true;
			}
			this.dataBack("全选");
		},
		//取消全选
		deCheckAll(){
			for(var i in this.list){
				this.list[i].checked=false;
			}
			this.dataBack("取消全选");
		},
		//数据回传
		dataBack(e){
			this.db({'type':e,'list':this.cartList});
		}
	},
	mounted(){
		console.log('cartlist',this.cartList)
	}
}
</script>

<style lang="scss">

</style>